<template>
  <div class="content">

    <div class="line">
      <div class="text">
        Pos机名称：
      </div>
      <div class="input">
        <i-input type="text" v-model="posName" placeholder="请输入Pos机名称" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line">
      <div class="text">
        费率：
      </div>
      <div class="input">
        <i-input type="text" v-model="rate" placeholder="请输入费率" style="width: 300px"></i-input>
      </div>
    </div>



     <div class="line">
      <div class="text">
        扣率：
      </div>
      <div class="input">
        <i-input type="text" v-model="deductionate" placeholder="请输入扣率" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line">
      <div class="text">
        详情描述：
      </div>
      <div class="input">
        <i-input type="text" v-model="detilText" placeholder="请输入详情描述" style="width: 300px"></i-input>
      </div>
    </div>



    <div class="line">
      <div class="text">
        详情图片：
      </div>
      <div class="input">
        <UploadImg @showParentComp="showParentXqtp"></UploadImg>
        <br>
        <img v-if="this.detilImg" :src="this.detilImg"  style="width:300px;height:200px">
      </div>
    </div>

    <div class="line">
      <div class="text">
        外站连接：
      </div>
      <div class="input">
        <i-input type="text" v-model="instructions4Use" placeholder="请输入外站连接" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line">
      <div class="text">
        火爆程度：
      </div>
      <div class="input">
        <select v-model="identifier" style="width:150px">
            <option value="1" key="1">
              热
            </option>
            <option value="2" key="2">
              爆
            </option>
        </select>
      </div>
    </div>

    <div class="line">
      <i-button type="info"  @click="handleAddManager">添加pos机</i-button>
    </div>


  </div>

</template>

<script>
import axios from 'axios'
import UploadImg from './UploadImg'
export default {
  name: 'UserJihuo',
  components: {
    UploadImg
  },
  data () {
    return {
      posName:'',
      rate:'',
      deductionate:'',
      detilText:'',
      detilImg:'',
      instructions4Use:'',
      identifier:''
    }
  },
  methods: {
    showParentXqtp(data){
      this.detilImg = data
      console.log('detilImg=============',this.detilImg)
    },
    handleAddManager(){
      if(this.jianyan()){
        axios.post('/web/api/podji/add',{"posName":this.posName,"rate":this.rate,"deductionate":this.deductionate,"detilText":this.detilText,"detilImg":this.detilImg,"instructions4Use":this.instructions4Use,"identifier":this.identifier}).then(this.handleAddInfoSucc)
      }
    },
    handleAddInfoSucc (res) {
      var data = res.data
      console.log('tag',data)
      this.$Message.success(data.message)
    },
    jianyan(){
      if(this.posName === ''){
        this.$Message.success("请输入pos机名称");
        return false;
      }else if(this.rate === ''){
        this.$Message.success("请输入费率");
        return false;
      }if(this.deductionate === ''){
        this.$Message.success("请输入扣率");
        return false;
      }else if(this.detilText === ''){
        this.$Message.success("请输入详情描述");
        return false;
      }if(this.detilImg === ''){
        this.$Message.success("请选择详情图片");
        return false;
      }else if(this.instructions4Use === ''){
        this.$Message.success("请填写外站连接");
        return false;
      }else if(this.identifier === ''){
        this.$Message.success("请选择火爆程度");
        return false;
      }else{
        return true
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.content {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.6;
    .line{
      width:80%;
      text-align: center;
      .text{
        text-align :right;
        width:50%;
        float :left;
      }
      .input{
        width:50%;
        float :left;
      }
    }

}
</style>

